<template lang="html">
  <div class="fm">
    <FMHeader
    title="君弘FM"
    :showTitleText="showTitleText"
    :url="currentArticle.yuyinUrl"
    :readUrl="currentArticle.contentUrl || currentArticle.url"
    :hasAudioUrl="hasAudio"
    :id="currentArticle.id"
    :summary="currentArticle.title"
    :pageNum="pageNum"
    :index="pageItemIndex"/>

    <div class="currentArticle">

      <div class="text_wrapper" ref="text_wrapper">
        <!-- <div class="text_content" ref="scroll_wrap" :style="{'transform': 'translate3d('+scrollDivTranslateX+'px, 0, 0)', 'width': (scrollDivLength * 2)+'px', 'animationDuration': this.animationDuration + 's'}"> -->
        <div class="text_content" ref="scroll_wrap" :style="{ 'width': (Math.ceil(scrollDivLength) * 2)+'px', 'animationDuration': this.animationDuration + 's', 'animationPlayState': this.animationPlayState, 'animationName': this.animationName}">
          <div class="scroll_div" ref="scroll_div">
            {{currentArticle.title}}
          </div>
          <div class="scroll_div" ref="scroll_next">
            {{currentArticle.title}}
          </div>
        </div>

        <div class="text_info">
          <div class="ico">
            <i class="iconfont2 icon-bofang"></i>
            <!-- <img src="../assets/images/icon_play_number@2x.png" alt=""> -->
          </div>
          <div>{{ curArticleBrowse | viewNum }}次</div>
          <div>{{ currentArticle.otime | fromNow }}</div>
        </div>
      </div>

    </div>
    <div class="audioWrap">
      <audio-play
        @prev="changeAudioPrev"
        @next="changeAudioNext"
        @load-complete="audioLoadCompleted"
        :canPrev="canPrev"
        :canNext="canNext"
        :readUrl="currentArticle.contentUrl || currentArticle.url"
        :showProgress="hasAudio"
        :audioLoaded="dataLoaded"
        ref="audio"/>
    </div>
    <div class="article" ref="article">
      <div class="tab" ref='tab'>
        <div class="articleList current" @click="showArticleList" ref="articleList">
          列表
        </div>
        <div class="articleDetail" @click="showArticleDetail" ref="articleDetail">
          文稿详情
        </div>
      </div>
      <div class="content">
        <div class="chooseBtnGroup" v-if="!showDetail" ref="chooseBtnGroup">
          <div class="btnWrap">
            <template v-for="(item, index) in btns">
              <span
                v-if="index > 0"
                :class="['btn', {'checkedBtn': isCheck(index)}]"
                :key="index"
                @click="chooseArticleType(item)">
                {{item}}
              </span>
            </template>
          </div>

          <div class="moreBtn" @click='showMoreBtn'>
            <i class='iconfont icon-xiangxia'  ref='icon'></i>
          </div>

        </div>
        <div  v-if="!showDetail">
          <load-more
            :bottom-method="loadBottom"
            :auto-fill="false"
            ref="loadmore">
            <template v-for="(item, index) in articleList">
              <article-item
                :summary="item.summary"
                :title="item.title"
                :time ="item.otime"
                :browseInfo="item.browseInfo"
                :isPlay="item.id === selectedAudioId"
                :curIndex="index"
                :audioIsPlaying="audioIsPlaying"
                :audioLoadCompleted="dataLoaded"
                @play="change(item.id)"
                :key="index"
                />
            </template>
          </load-more>
        </div>
        <article-detail
          :summary="currentArticle.summary"
          :contentUrl="currentArticle.contentUrl || currentArticle.url"
          :browseInfo="currentArticle.browseInfo"
          :hasCollect="currentArticle.hasCollect"
          @save-success="saveSuccess"
          @cancel-success="cancelSuccess"
          @changeCollectStatus='changeCollectStatus'
        v-else/>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import FMHeader from '@/components/FM/Header.vue'
import ArticleItem from '@/components/FM/Article.vue'
import ArticleDetail from '@/components/FM/ArticleDetail.vue'
import AudioPlay from '@/components/player/index2.vue'
import LoadMore from '@/components/LoadMore.vue'
import Vue from 'vue'
import { getArticles, getNewArticles, Article, getReadCount, readArticle, NewsCount, getNetworkStatus, getRealTimeArticles, getYanbaoArticles, getJiepanArticles, getZaobaoArticles, playAudioByNative, getAudioProgress } from '../api'
import { fromNow } from '../util/timeUtil'
import { numberToArab } from '../util/numberUtil'
import { eventTrack } from '../util/decorator'

interface FMdata {
  timer: any;
  timeout: any;
  dataLoaded: boolean;
  showTitleText: boolean;
  showDetail: boolean;
  currentArticle: any;
  articleList: Article[];
  pageNum: number;
  pageNumTemp: number;
  forcePageNumIndex: number;
  bodyScroll: number;
  curArticleBrowse: number;
  selectedAudioId: string;
  audio: any;
  newsIds: string[];
  btnGropPosTop: number;
  playerBtnGroup: any;
  articleDOM: any;
  articleListDOM: any;
  articleDetailDOM: any;
  tabDOM: any;
  scrollWrap: any;
  scrollDiv: any;
  // audioUrls: string[];
  btns: any[];
  activeIndex: number;
  scrollDivTranslateX: any;
  scrollDivLength: number;
  animationDuration: number;
  animationPlayState: string;
  animationName: string;
  isFirstLoad: boolean;
  localStorageData: any;
  loadMoreData: boolean;
}

// let timer: any, timeout: any
export default Vue.extend({
  data () {
    const initialState: FMdata = {
      timer: null,
      timeout: null,
      dataLoaded: false,
      showTitleText: true,
      showDetail: false,
      currentArticle: {},
      articleList: [],
      pageNum: 1,
      pageNumTemp: 0,
      forcePageNumIndex: 0,
      bodyScroll: 0,
      curArticleBrowse: 0,
      selectedAudioId: '',
      newsIds: [],
      audio: '',
      btnGropPosTop: 0,
      playerBtnGroup: '',
      articleDOM: '',
      articleListDOM: '',
      articleDetailDOM: '',
      tabDOM: '',
      scrollWrap: '',
      scrollDiv: '',
      // audioUrls: [],
      btns: ['自选资讯', '最新资讯', '小君早报', '实时资讯', '小君解盘', '小君研报'],
      // 选中的栏目
      activeIndex: 1,
      scrollDivTranslateX: '',
      scrollDivLength: 0,
      animationDuration: 0,
      animationPlayState: 'paused',
      animationName: 'none',
      isFirstLoad: true,
      localStorageData: JSON.parse(<any>localStorage.getItem('FMarticle')) || {},
      loadMoreData: false
    }
    return initialState
  },
  components: {
    FMHeader,
    ArticleItem,
    ArticleDetail,
    AudioPlay,
    LoadMore
  },
  created () {
  },
  filters: {
    fromNow(ts: string): string {
      return fromNow(parseInt(ts))
    },

    viewNum(num: string): string {
      return  numberToArab(num + '')
    }
  },
  computed: {
    audioIsPlaying ():boolean {
      if (this.audio) {
        return this.audio.isPlaying
      }
      else {
        return false
      }
    },
    hasAudio (): boolean {
      return !!this.currentArticle.yuyinUrl
    },
    pageItemIndex ():number {
      if(this.forcePageNumIndex) {
        return this.forcePageNumIndex
      } else return 0
    },
    canPrev (): boolean {
      const hasPlayingArticle = this.articleList.findIndex(n => n.id === this.selectedAudioId) !== -1
      const isFirstAudio = this.articleList.findIndex(n => n.id === this.selectedAudioId) === 0
      return !isFirstAudio && hasPlayingArticle
    },
    canNext (): boolean {
      const hasPlayingArticle = this.articleList.findIndex(n => n.id === this.selectedAudioId) !== -1
      const isLastAudio = this.articleList.findIndex(n => n.id === this.selectedAudioId) === (this.articleList.length - 1)
      return !isLastAudio && hasPlayingArticle
    }
  },
  mounted () {
    // window.addEventListener('scroll', this.handleTabPos)
    this.initScroll ()
    this.initDOM()
    this.initData()
    eventTrack('007001')
  },
  methods: {
    initData () {
      //    ！！！！！！！！！！开启以下测试代码需要注掉 268和270 行   否则会先清空localStorage再刷新
      //   * @param state 播放状态：0（播放中），1（【不播放】暂停/停止）
      // if (!window.location.search) {
      //   let url = window.location.href
      //   window.location.href = url+`?newsid=5_3925006&title=test&state=0`
      // }
      // 如果url没有参数则清空localStorage 更新数据
      let newsid = this.getQueryString('newsid') || this.getQueryString('newid')
      if (!newsid) {
        // console.log('removeStorage')
        localStorage.removeItem('FMarticle')
        this.localStorageData = {}
        this.chooseArticleType('最新资讯')
      } else { // 如果有 则展示localStorage数据
        const articleType:string = JSON.parse(<any>localStorage.getItem('FMarticle')).selectArticleType || JSON.parse(<any>localStorage.getItem('FMarticle')).articleType
        this.chooseArticleType(articleType)
        this.dealQueryStringData()
      }
    },
    dealQueryStringData () {
      let newsid = this.getQueryString('newsid') || this.getQueryString('newid')
      let title = this.getQueryString('title')
      console.log('newsid', newsid, title)
      if (newsid) {
        this.selectedAudioId = newsid
        let state = Number(this.getQueryString('state'))
        setTimeout(() => {  //直接调用原生  页面会无法渲染，所以延时500ms
          this.dataLoaded = true
          console.log('this.articleList', this.articleList)
          this.articleList.forEach((item, index) => {
            if (item.id === newsid) {
              this.currentArticle = item
              this.initMarquee()
              this.audio.resumeProgress(state, this.currentArticle)
            } else {
              this.forcePageNumIndex = index
            }
          })
        }, 500)
      }
    },
    initDOM () {
      this.articleListDOM = this.$refs.articleList
      this.articleDetailDOM = this.$refs.articleDetail
      this.articleDOM = this.$refs.article,
      this.articleListDOM = this.$refs.articleList
      this.articleDetailDOM = this.$refs.articleDetail
      this.scrollWrap = this.$refs.scroll_wrap
      this.scrollDiv = this.$refs.scroll_div
      this.tabDOM = this.$refs.tab
      this.audio = this.$refs.audio
    },
    initScroll () {
      const playerComponent: any = this.$children.find(item => item.$el.classList.contains('player__wrapper'))
      this.playerBtnGroup = <any>playerComponent.$refs.playerBtnGroup
      this.btnGropPosTop = this.playerBtnGroup.getBoundingClientRect().top - 45
      window.addEventListener('scroll', this.handleScroll)
    },

    showArticleList () {
      eventTrack('007005')
      if (!this.articleListDOM.classList.contains('current')) {
        this.articleListDOM.classList.add('current')
        this.articleDetailDOM.classList.remove('current')
        this.showDetail = false
        this.$nextTick(()=> {
          window.scrollTo(0, this.bodyScroll)
        })
      } else {
        return
      }
    },
    showArticleDetail () {
      eventTrack('007007')
      if (!this.articleDetailDOM.classList.contains('current')) {
        this.bodyScroll = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
        if (this.bodyScroll >= 175) { // tab 栏距文档顶部的距离
          window.scrollTo(0, 175)
        }
        this.articleDetailDOM.classList.add('current')
        this.articleListDOM.classList.remove('current')
        this.showDetail = true
      } else {
        return
      }
    },
    /**
     * 文章收藏成功
     */
    saveSuccess(): void {
      this.currentArticle.browseInfo.store = parseInt(this.currentArticle.browseInfo.store) + 1 + ''
      this.currentArticle.hasCollect = true
      // console.log(this.currentArticle.browseInfo.store)
    },
    /**
     * 文章取消收藏
     */
    cancelSuccess (): void {
      this.currentArticle.browseInfo.store = parseInt(this.currentArticle.browseInfo.store) - 1 + ''
      this.currentArticle.hasCollect = false
    },

    /**
     * 改变收藏的状态
     */
    changeCollectStatus (val: boolean): void {
      this.currentArticle.hasCollect = val
    },

    /**
     * 文章分享成功
     */
    shareSuccess(): void {
      this.currentArticle.browseInfo.share = parseInt(this.currentArticle.browseInfo.share) + 1 + ''
    },

    /**
     * 切换选中文章和音频地址
     */
    change (audioId: string) {
      if (this.selectedAudioId === audioId) return
      this.changeSelected(audioId)
      this.audioPlay(audioId)
      console.warn(audioId)
      let selectArticleType:any = localStorage.getItem('FMarticle') && JSON.parse(<any>localStorage.getItem('FMarticle')).articleType
      this.$set(this.localStorageData, 'selectArticleType', selectArticleType)
      localStorage.setItem('FMarticle', JSON.stringify(this.localStorageData))
    },

    changeSelected (audioId: string) {
      eventTrack('007006')
      this.selectedAudioId = audioId
      this.dataLoaded = false
      this.currentArticle = this.articleList.find(n => n.id === audioId)
      this.curArticleBrowse = this.currentArticle.browseInfo.browse // 获取当前播放的article的browse
      // this.audioPlay(this.articleList.findIndex(n => n.id === audioId))
      this.initMarquee()
      readArticle(this.currentArticle.id)
    },

    audioPlay (audioId: string) {
      console.log('audioPlay')
      // let curIndex = this.articleList.findIndex(n => n.id === audioId)
      this.audio.changeAudio(this.articleList.find(n => n.id === audioId))
    },

    /**
     * 切换选中文章和音频地址
     */
    // changeSelected (curIndex: number) {

    //   if (curIndex === this.articleList.findIndex(item => item === this.currentArticle)) return
    //   // this.audioPlay(curIndex)

    //   eventTrack('007006')

    //   for (let item of (<any>Object).values(this.articleList)) {
    //     item.curPlay = false
    //   }
    //   this.articleList[curIndex].curPlay = true
    //   this.currentArticle = <Article>this.articleList.find(item => item.curPlay)
    //   // console.warn('id',this.currentArticle.id)
    //   readArticle(this.currentArticle.id)
    //   this.initMarquee()
    // },

    initMarquee () {
      this.animationName = 'none'
      this.animationPlayState = 'paused'
      if (this.timeout) {
        clearInterval(this.timeout)
        this.timeout = null
      }
      this.$nextTick(() => {
        const textWrapper:any = this.$refs.text_wrapper
        const scrollNext:any = this.$refs.scroll_next
        this.scrollDivLength = this.scrollDiv.getBoundingClientRect().width
        console.warn(this.scrollDiv.getBoundingClientRect().width)
        if (this.scrollDivLength > textWrapper.offsetWidth) {
          this.animationDuration = this.scrollDivLength / 30
          scrollNext.innerHTML = this.currentArticle.title
          this.timeout = setTimeout(() => {
            this.animationName = 'scrollText'
            this.animationPlayState = 'running'
          }, 2000)
        } else {
          scrollNext.innerHTML = ''
        }
      })
    },

    hideTitle () {
      if (!this.showTitleText) return
      this.showTitleText = false
    },
    showTitle () {
      if (this.showTitleText) return
      this.showTitleText = true
    },
    loadBottom () {
      this.loadMoreData = true
      const type = this.localStorageData.articleType
      console.log('type', type)
      const loadmore: any = this.$refs.loadmore
      this.pageNum++
      switch(type) {
        case '最新资讯' :
        this.dealData('最新资讯', 'NewArticles', this.pageNum, getNewArticles)
        break;
        case '小君早报' :
        this.dealData('小君早报', 'ZaobaoArticles', this.pageNum, getZaobaoArticles)
        break;
        case '实时资讯' :
        this.dealData('实时资讯', 'RealTimeArticles', this.pageNum, getRealTimeArticles)
        break;
        case '小君解盘' :
        this.dealData('小君解盘', 'JiepanArticles', this.pageNum, getJiepanArticles)
        break;
        case '小君研报' :
        this.dealData('小君研报', 'YanbaoArticles', this.pageNum, getYanbaoArticles)
        break;
        default:
          break;
      }
    },
    changeAudioPrev () {
      let ind = this.articleList.findIndex(item => item.id === this.currentArticle.id)
      this.change(this.articleList[--ind].id)
      // this.change(--ind)
      // this.changeAudio(--ind)
    },
    changeAudioNext () {
      let ind = this.articleList.findIndex(item => item.id === this.currentArticle.id)
      this.change(this.articleList[++ind].id)
    },
    handleScroll () {
      const btnGroup:any = this.playerBtnGroup
      let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
      if (scrollTop >= this.btnGropPosTop) {
        btnGroup.style.zIndex = '4000'
        btnGroup.style.position = 'fixed'
        btnGroup.style.transform = 'scale(0.6)'
        btnGroup.style.top = '8px'
        this.hideTitle()
      }
      if (scrollTop < this.btnGropPosTop) {
        btnGroup.style.zIndex = '2000'
        btnGroup.style.position = 'absolute'
        btnGroup.style.top = '45px'
        btnGroup.style.transform = 'scale(1)'
        this.showTitle()
      }
      this.handleTabPos()
    },
    handleTabPos () {
      if (this.tabDOM.getBoundingClientRect().top <= 45) {
        this.tabDOM.style.position = 'fixed'
        this.tabDOM.style.top = '45px'
      }
      if (this.articleDOM.getBoundingClientRect().top > 45) {
        this.tabDOM.style.position = 'absolute'
        this.tabDOM.style.top = '0'
      }
    },

    // 音频加载完毕
    audioLoadCompleted (val: boolean) {
      this.dataLoaded = val
      // this.$toast(val)
    },
    isCheck (index: number):boolean {
      if (index === this.activeIndex) return true
      else return false
    },
    transformType (str: string):string {
      switch(str) {
        case '最新资讯' :
        return 'NewArticles'
        case '小君早报' :
        return 'ZaobaoArticles'
        case '实时资讯' :
        return 'RealTimeArticles'
        case '小君解盘' :
        return 'JiepanArticles'
        case '小君研报' :
        return 'YanbaoArticles'
        default:
        return 'NewArticles'
      }
    },
    chooseArticleType (item:string):void {
      console.warn(this.localStorageData)
      const FMarticleType: string = item
      const loadmore:any = this.$refs.loadmore
      loadmore.reset()
      this.localStorageData.articleType = item
      localStorage.setItem('FMarticle', JSON.stringify(this.localStorageData))
      // console.log('localStorage', JSON.parse(<any>localStorage.getItem('FMarticle')))
      this.activeIndex = this.btns.findIndex(item => item === FMarticleType)
      let transformType = this.transformType(item)
      this.pageNum = this.localStorageData[transformType] && this.localStorageData[transformType].pageNum || 1
      // console.log(1111, this.localStorageData[transformType])
      let localStorageData:any = null
      switch(item) {
        // case '自选咨询': // 自选咨询 暂不不用
        //   this.pageNum = 1
        //   getArticles(this.pageNum).then((resp:any) => {
        //     console.log(resp)
        //     this.setArticles(resp)
        //   })
        //   break;
        case '最新资讯':
          localStorageData = localStorage.getItem('FMarticle') && JSON.parse(<any>localStorage.getItem('FMarticle')).NewArticles
          if (localStorageData) {
            this.setArticles(localStorageData)
          } else {
            this.dealData('最新资讯', 'NewArticles', this.pageNum, getNewArticles)
          }
          break;
        case '小君早报':
          localStorageData = localStorage.getItem('FMarticle') && JSON.parse(<any>localStorage.getItem('FMarticle')).ZaobaoArticles
          // console.log(JSON.parse(<any>localStorage.getItem('FMarticle')).ZaobaoArticles)
          if (localStorageData) {
            // console.log('true')
            this.setArticles(localStorageData)
          } else {
            this.dealData('小君早报', 'ZaobaoArticles', this.pageNum, getZaobaoArticles)
          }
          break;
        case '实时资讯':
          localStorageData = localStorage.getItem('FMarticle') && JSON.parse(<any>localStorage.getItem('FMarticle')).RealTimeArticles
          if (localStorageData) {
            this.setArticles(localStorageData)
          } else {
            this.dealData('实时资讯', 'RealTimeArticles', this.pageNum, getRealTimeArticles)
          }
          break;
        case '小君解盘':
          localStorageData = localStorage.getItem('FMarticle') && JSON.parse(<any>localStorage.getItem('FMarticle')).JiepanArticles
          if (localStorageData) {
            this.setArticles(localStorageData)
          } else {
            this.dealData('小君解盘', 'JiepanArticles', this.pageNum, getJiepanArticles)
          }
          break;
        case '小君研报':
          localStorageData = localStorage.getItem('FMarticle') && JSON.parse(<any>localStorage.getItem('FMarticle')).YanbaoArticles
          if (localStorageData) {
            this.setArticles(localStorageData)
          } else {
            this.dealData('小君研报', 'YanbaoArticles', this.pageNum, getYanbaoArticles)
          }
          break;
        default:
          break;
      }
    },
    dealData (type: string, storageType: string, pageNum: number, request: any) {
      let article: any = []
      console.log('pageNum', pageNum)
      request(pageNum).then((resp:any) => {
        console.log('resp', resp)
        this.newsIds = resp.data.map((item:any) => item.id)
        article = resp
        return getReadCount(this.newsIds)
      }).then((browse:any) => {
        this.mergeData(article, browse.data)
        if (this.localStorageData[storageType]) {
          let dataArray = this.localStorageData[storageType].data
          this.localStorageData[storageType] = {...this.localStorageData[storageType], ...article}
          this.localStorageData[storageType].data = [...dataArray, ...article.data]
          this.localStorageData[storageType].pageNum = pageNum
        }
        else {
          this.$set(this.localStorageData, storageType, article)
          this.$set(this.localStorageData[storageType], 'pageNum', pageNum)
        }
        this.$set(this.localStorageData, 'articleType', type)
        console.log('this.localStorageData', this.localStorageData)
        localStorage.setItem('FMarticle', JSON.stringify(this.localStorageData))
        this.setArticles(article)
      }).catch((err:any) => {
        console.warn('数据已全部显示，或数据请求出错')
        const loadmore:any = this.$refs.loadmore
        loadmore.onBottomAllLoaded()
        this.loadMoreData = false
      })
    },
    setArticles (res:any) {
      if (this.pageNum !== 1 && this.loadMoreData) {
        this.articleList = [...this.articleList, ...res.data]
        const loadmore:any = this.$refs.loadmore
        loadmore.onBottomLoaded()
        this.loadMoreData = false
      } else this.articleList = res.data
      // let arrid = res.data.map((item:any)=> item.id) //测试用
      // console.log('data',arrid)
      if (this.isFirstLoad) {
        this.isFirstLoad = false
      }
      this.audio.canPlay = true
      if (this.articleList.findIndex(n => n.id === this.selectedAudioId) !== -1) {
        this.currentArticle = this.articleList.find(n => n.id === this.selectedAudioId)
        this.initMarquee()
      }
      this.dataLoaded = true
    },
    mergeData (article:any, browseData:any) {
      article.data.forEach((item:any, index:any) => {
        item.browseInfo = browseData[`news_${item.id}`]
        item.hasCollect = false
      })
    },
    showMoreBtn () {
      const chooseBtnGroup:any = this.$refs.chooseBtnGroup
      const icon:any = this.$refs.icon
      if (chooseBtnGroup.style.height === 'auto' && icon.classList.contains('btn-direction-top')) {
        chooseBtnGroup.style.height = '45px'
        icon.classList.remove('btn-direction-top')
      } else {
        chooseBtnGroup.style.height = 'auto'
        icon.classList.add('btn-direction-top')
      }
    },
    getQueryString(name:string){
      // let hrefTemp = 'http://10.1231.234?url=http://231830&newsid=1_0213&progress=0.12'
      let reg = new RegExp('(^|&)'+name+'=([^&]*)(&|$)')
      let r = window.location.search.substr(1).match(reg)
      if(r != null){
        return decodeURI(r[2])
      }
      return null
    }
  },
  watch: {
    currentArticle (val) {
      if (val.browseInfo) {
        this.curArticleBrowse = val.browseInfo.browse
      }
    }
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleTabPos)
    window.removeEventListener('scroll', this.handleScroll)
  }
})
</script>

<style lang="less" scoped>
@import '../assets/less/mixins.less';

.fm {
  padding-top: 45px;
  box-sizing: border-box;
  background-color: #F6F6F6;
}
.current {
  color: #309FEA;
  border-bottom: 2px solid  #309FEA !important;
}
.currentArticle {
  background-color: #26A8FF;
  padding: 0 15px 15px;
}
.audioWrap {
  background-color: #26A8FF;
  min-height: 100px;
  padding: 0 15px;
  box-sizing: border-box;
}
.article {
  background-color: #fff;
  padding-top: 40px;
  position: relative;
  margin-top: 7px;
  .tab {
    position: absolute;
    z-index: 2000;
    background-color: #fff;
    // background-color: transparent;
    top: 0;
    left: 0;
    height: 40px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid #EAEAEA;

    & > div {
      width: 24%;
      height: 100%;
      .flexLayout();
      border-bottom: 2px solid  transparent;
      box-sizing: border-box;
    }
  }
  .content {
    padding: 0px 15px 0px 15px;
  }
}
.text_wrapper {
  color: #fff;
  display: flex;
  min-height: 42px;
  padding: 10px 0 0 0;
  flex-direction: column;
  overflow-x: hidden;
  .text_content {
    text-align: left;
    font-size: 0;
    margin-bottom: 3px;
    height: 19px;
    overflow: hidden;
    // animation-name: scrollText;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: paused;
  }
}

.text_info {
  font-size: 12px;
  height: 20px;
  display: flex;
  .flexLayout(left);
  .ico {
    display: flex;
    align-items: center;
    height: 100%;
    transform: scale(0.8);
    box-sizing: border-box;
    i {
      font-size: 16px;
    }
  }
  div:nth-child(2){
    margin: 0 15px 0 4px;
  }
}
.scroll_div {
  font-size: 16px;
  display: inline-block;
  padding-right: 50px;
  white-space: nowrap;
}
.chooseBtnGroup {
  padding: 10px 5px 0;
  border-bottom: 1px solid #EAEAEA;
  font-size: 0;
  display: flex;
  height: 45px;
  box-sizing: border-box;
  overflow: hidden;
  .btnWrap {
    flex-basis: 90%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .btn {
      display: inline-block;
      color: #000;
      font-size: 12px;
      border-radius: 5px;
      background-color: #fff;
      border: 1px solid #eaeaea;
      padding: 5px 10px;
      margin-right: 5px;
      margin-bottom: 10px;
    }
    .checkedBtn {
      background-color:  #26A8FF;
      border: 1px solid #26A8FF;
      color: #fff;
    }
  }
  .moreBtn {
    flex-basis: 10%;
    height: 30px;
    .flexLayout();
    i {
      font-size: 12px;
      transition: 0.3s linear;
      transform-origin: center center;
    }
  }
}
@media screen and (min-width: 319px) and (max-width: 374px) {
 .chooseBtnGroup .btn {
   margin-right: 10px!important;
 }
}
@media screen and (min-width: 375px) and (max-width: 413px) {
 .chooseBtnGroup .btn {
   margin-right: 15px!important;
 }
}
@media screen and (min-width: 414px) {
 .chooseBtnGroup .btn {
   margin-right: 10px!important;
 }
}
.btn-direction-top {
  transform: rotateX(-180deg);
}

</style>
